<template>
  <div class="teach">
    <my-tabs :tab-list="tabList">
      <el-button slot="right" size="mini" type="primary" @click="handleEndSection"
        >完结课时</el-button
      >
    </my-tabs>
    <el-button size="mini" type="primary" @click="handleAddMenu(course_id, 0)">新建</el-button>
    <el-table
      class="teach-table"
      :data="sectionList"
      row-key="id"
      :show-header="false"
      :tree-props="treeProps"
      size="mini"
    >
      <el-table-column>
        <template slot-scope="scope">
          {{ scope.row.title }}
          <template v-if="scope.row.level == sectionLevel">
            <el-tag type="warning" size="mini" v-if="scope.row.status == 0">审核未通过</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.status == 1">审核通过</el-tag>
            <el-tag
              type="info"
              size="mini"
              v-else-if="scope.row.status == 2 || scope.row.status == 3"
              >待审核</el-tag
            >
          </template>
        </template>
      </el-table-column>
      <el-table-column width="140">
        <template slot-scope="scope">
          <el-row type="flex" justify="end" align="middle">
            <el-button size="mini" type="text" @click="handleEdit(scope)">编辑</el-button>
            <template v-if="scope.row.course_sec_level > scope.row.level">
              <el-divider direction="vertical"></el-divider>
              <el-button size="mini" type="text" @click="handleAdd(scope)">添加</el-button>
            </template>
            <el-divider direction="vertical"></el-divider>
            <el-button size="mini" type="text" @click="handleDelete(scope)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import MyTabs from '../../../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          title: '课时管理'
        }
      ],
      course_id: this.$route.params.id,
      treeProps: { children: 'child', hasChildren: 'hasChildren' },
      sectionList: [],
      sectionLevel: 0
    }
  },
  mounted() {
    this.handleSectionTree()
    this.handleSectionLevel()
  },
  methods: {
    // 获取课时树
    handleSectionTree() {
      this.$api.getTeacherCourseSectionTree(this.course_id, res => {
        this.sectionList = res.data
      })
    },
    // 课程目录层级
    handleSectionLevel() {
      this.$api.getTeacherCourseSectionLevel(this.course_id, res => {
        this.sectionLevel = res.data
      })
    },
    // 新建章节
    handleAddMenu(id, pid) {
      if (this.sectionLevel == 1) {
        // 添加课时
        this.$router.push({
          path: '/my/classes/teach/video/' + this.course_id + '/create',
          query: {
            id: pid
          }
        })
      } else {
        this.$messageBox
          .prompt('', {
            title: '添加章节',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'text',
            inputValue: '',
            inputPattern: /\S/,
            inputErrorMessage: '章节名称不能为空',
            inputPlaceholder: '章节名称',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: true
          })
          .then(({ value }) => {
            this.$api.createTeacherCourseSectionMenu(
              id,
              pid,
              {
                title: value
              },
              res => {
                this.$message.success(res.msg, res => {
                  this.reload()
                })
              },
              error => {
                this.$message.error(error.msg)
              }
            )
          })
          .catch(() => {})
      }
    },
    // 添加
    handleAdd(scope) {
      if (scope.row.course_sec_level - 1 == scope.row.level) {
        // 添加课时
        this.$router.push({
          path: '/my/classes/teach/video/' + this.course_id + '/create',
          query: {
            id: scope.row.id
          }
        })
      } else {
        // 添加章节
        this.handleAddMenu(this.course_id, scope.row.id)
      }
    },
    // 编辑
    handleEdit(scope) {
      if (scope.row.is_last == 0) {
        // 编辑章节
        this.$messageBox
          .prompt('', {
            title: '编辑章节',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputType: 'text',
            inputValue: scope.row.title,
            inputPattern: /\S/,
            inputErrorMessage: '章节名称不能为空',
            inputPlaceholder: '章节名称',
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: true
          })
          .then(({ value }) => {
            this.$api.updateTeacherCourseSectionMenu(
              this.course_id,
              scope.row.id,
              {
                title: value
              },
              res => {
                this.$message.success(res.msg, res => {
                  this.reload()
                })
              },
              error => {
                this.$message.error(error.msg)
              }
            )
          })
          .catch(() => {})
      } else {
        // 编辑课时
        this.$router.push({
          path: '/my/classes/teach/video/' + this.course_id + '/edit',
          query: {
            id: scope.row.id
          }
        })
      }
    },
    // 删除
    handleDelete(scope) {
      this.$messageBox
        .confirm('确定删除吗？', {
          title: '提示'
        })
        .then(() => {
          this.$api.deleteTeacherCourseSectionDelete(
            this.course_id,
            scope.row.id,
            res => {
              this.$message.success(res.msg, res => {
                this.handleSectionTree()
              })
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 结束课时
    handleEndSection() {
      this.$messageBox
        .confirm('确定完结课时吗？', {
          title: '提示'
        })
        .then(() => {
          this.$api.putUserTeacherCourseFinish(this.course_id, res => {
            this.$message.success(res.msg)
            this.$router.replace({
              path: '/my/classes/teach/video'
            })
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.teach-table {
  margin-top: 10px;
  .el-tag {
    margin-left: 10px;
  }
}
</style>
